<template>
  <div>
    <CategorySelector style="margin-bottom: 20px" :isShowtime="scene != 1"></CategorySelector>
    <el-card>
      <!-- 在这里可以用活动属性来做切换,但是考虑到后面还会使用到组件通讯,使用component  :is 这种活动属性的方法不方便,所以直接使用v-if -->
      <SpuList v-if="scene == 1" @sendShowSpu="saveScene" @getSpuInfo="saveSpuInfo" @getSkuInfo="saveSkuInfo"></SpuList>
      <SpuForm v-if="scene == 2" @sendShowSpu="saveScene" :getSpuInfo="SpuInfo"></SpuForm>
      <SkuForm v-if="scene == 3" @sendShowSpu="saveScene" :getSkuInfo="SkuInfo"></SkuForm>
    </el-card>
  </div>
</template>

<script lang="ts">
import CategorySelector from "@/components/CategorySelector/index.vue"
import SpuList from "./components/SpuList.vue"
import SpuForm from "./components/SpuForm.vue"
import SkuForm from "./components/SkuForm.vue"
export default {
  name: "Spu",
  components: { CategorySelector, SpuList, SpuForm, SkuForm },
}
</script>

<script lang="ts" setup>
import { reactive, ref } from "vue"
import { Plus, Edit, Delete, InfoFilled } from "@element-plus/icons-vue"
let SpuInfo = ref()
let SkuInfo = ref([])
let scene = ref(1)

// 这里scene设计到组件切换,默认是1,但是需要子组件传参修改
// 使用自定事件 进行组件切换
const saveScene = (val: number) => {
  // console.log(val)
  scene.value = val
}

// 将子组件spuList当前点击的row参数传到spuForm,用来获取id等,给组件spuList发送请求
const saveSpuInfo = val => {
  // console.log("父组件接受", val)
  SpuInfo.value = {
    ...val,
    spuImageList: [], // 为了避免报错 需要添加上这两个属性
    spuSaleAttrList: [],
  }
}

// 将子组件spuList传来的row参数传到子组件skuForm
const saveSkuInfo = val => {
  // console.log(val)
  SkuInfo.value = val
}
</script>

<style></style>
